<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - eBusiness</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/js/slider.js}"></script>
</head>
<body>
    <div th:replace="~{common/header :: header}"></div>

    <div class="slider-container">
        <div class="slides">
            <img th:src="@{/images/1.jpg}" alt="Slide 1" class="slide active">
            <img th:src="@{/images/2.png}" alt="Slide 2" class="slide">
            <img th:src="@{/images/3.png}" alt="Slide 3" class="slide">
        </div>
        <div class="navigation-arrows">
            <span class="prev-arrow">&#10094;</span>
            <span class="next-arrow">&#10095;</span>
        </div>
        <div class="pagination-dots">
            <span class="dot active" data-slide="0"></span>
            <span class="dot" data-slide="1"></span>
            <span class="dot" data-slide="2"></span>
        </div>
    </div>

    <div class="category-search-bar-container">
        <div class="main-nav">
            <ul>
                <li><a th:href="@{/index}">首页</a></li>
                <li th:each="type : ${goodsTypes}"><a th:href="@{/category(typeId=${type.id})}" th:text="${type.typename}"></a></li>
            </ul>
        </div>
        <div class="header-search">
            <form th:action="@{/search}" method="get">
                <input type="text" name="keyword" placeholder="请输入关键词" th:value="${keyword}">
                <button type="submit">搜索</button>
            </form>
        </div>
    </div>

    <div class="main-content">
        <div th:if="${goods != null}" class="goods-detail">
            <img th:src="@{/images/{picture}(picture=${goods.gpicture})}" alt="商品图片" class="detail-image">
            <div class="detail-info">
                <h2 th:text="${goods.gname}">商品名称</h2>
                <p>
                    <span style="font-weight: bold; color: #e51d2a;">商品折扣价: ¥<span th:text="${goods.grprice}"></span></span>
                </p>
                <p>
                    商品原价: <span class="original-price">¥<span th:text="${goods.goprice}"></span></span>
                </p>
                <p>商品类型: <span th:text="${goodstype.typename}"></span></p>
                <p>库存: <span th:text="${goods.gstore}"></span></p>
                <form th:action="@{/addToFavorites}" method="post" class="add-to-favorites-form" style="display: inline-block; margin-right: 10px;">
                    <input type="hidden" name="goodsId" th:value="${goods.id}">
                    <button type="submit" class="action-button favorite-button">加入收藏</button>
                </form>
                <form th:action="@{/addToCart}" method="post" class="add-to-cart-form" style="display: inline-block;">
                    <input type="hidden" name="goodsId" th:value="${goods.id}">
                    <label for="quantity">请输入购买数量:</label>
                    <input type="number" id="quantity" name="quantity" value="1" min="1" th:max="${goods.gstore}" class="quantity-input">
                    <button type="submit" class="action-button add-to-cart-button">加入购物车</button>
                </form>
                <p th:if="${error}" style="color: red;" th:text="${error}"></p>
                <p th:if="${message}" style="color: green;" th:text="${message}"></p>
            </div>
        </div>
        <div th:if="${goods == null}">
            <p>未找到该商品详情。</p>
        </div>
    </div>

    <div th:replace="~{common/footer :: footer}"></div>

    <script>
        $(document).ready(function() {
            // AJAX for Add to Favorites
            $('.add-to-favorites-form').submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交

                const form = $(this);
                const url = form.attr('th:action') || form.attr('action');
                const goodsId = form.find('input[name="goodsId"]').val();

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: { goodsId: goodsId },
                    success: function(response) {
                        alert(response.message);
                    },
                    error: function(xhr) {
                        const response = JSON.parse(xhr.responseText);
                        alert(response.message || '操作失败，请稍后再试！');
                    }
                });
            });

            // AJAX for Add to Cart
            $('.add-to-cart-form').submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交

                const form = $(this);
                const url = form.attr('th:action') || form.attr('action');
                const goodsId = form.find('input[name="goodsId"]').val();
                const quantity = form.find('input[name="quantity"]').val();

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: { goodsId: goodsId, quantity: quantity },
                    success: function(response) {
                        alert(response.message);
                    },
                    error: function(xhr) {
                        const response = JSON.parse(xhr.responseText);
                        alert(response.message || '操作失败，请稍后再试！');
                    }
                });
            });
        });

        // Slider JavaScript (从 index.html 复制过来)
        let currentSlide = 0;
        const slides = $('.slide');
        const dots = $('.dot');
        const totalSlides = slides.length;

        function showSlide(index) {
            slides.removeClass('active').hide();
            dots.removeClass('active');

            $(slides[index]).addClass('active').show();
            $(dots[index]).addClass('active');
        }

        function nextSlide() {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }

        function prevSlide() {
            currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
            showSlide(currentSlide);
        }

        showSlide(currentSlide);

        let slideInterval = setInterval(nextSlide, 5000);

        $('.slider-container').hover(
            function() { clearInterval(slideInterval); },
            function() { slideInterval = setInterval(nextSlide, 5000); }
        );

        $('.next-arrow').click(function() {
            nextSlide();
        });

        $('.prev-arrow').click(function() {
            prevSlide();
        });

        $('.dot').click(function() {
            const slideIndex = $(this).data('slide');
            currentSlide = slideIndex;
            showSlide(currentSlide);
        });
    </script>
</body>
</html> 